<template>
    <div class="device" :style="{ '--primary-color': $store.state.settings.theme }">
        <el-card shadow="never" style="border: 0" v-show="showSearch">
            <el-form class="search-form" :model="queryParams" ref="queryForm" :inline="true" label-width="75px" style="margin-bottom: -20px">
                <el-form-item label="设备名称" prop="deviceName">
                    <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable size="small" @keyup.enter.native="handleQuery" style="width: 150px" />
                </el-form-item>
                <el-form-item label="设备编号" prop="serialNumber">
                    <el-input v-model="queryParams.serialNumber" placeholder="请输入设备编号" clearable size="small" @keyup.enter.native="handleQuery" style="width: 150px" />
                </el-form-item>
                <el-form-item label="设备状态" prop="status">
                    <el-select v-model="queryParams.status" placeholder="请选择设备状态" clearable size="small" style="width: 150px">
                        <el-option v-for="dict in dict.type.iot_device_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <el-checkbox v-model="queryParams.showChild" style="margin: 0 10px 0" @change="handleQuery">显示上级机构数据</el-checkbox>
                    <el-tooltip content="选中后，本级可以看下级的数据" placement="top"><i class="el-icon-info"></i></el-tooltip>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="main-card" shadow="never" v-if="showType == 'list'" :style="showSearch ? '' : 'margin:0'">
            <div class="card-toolbar mb8">
                <div>
                    <el-dropdown class="mr10" @command="(command) => handleCommand(command)" v-hasPermi="['iot:device:add']">
                        <el-button size="mini" type="primary" plain icon="el-icon-plus">
                            新增
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="handleEditDevice" v-hasPermi="['iot:device:add']">手动添加</el-dropdown-item>
                            <el-dropdown-item command="handleBatchImport" v-hasPermi="['iot:device:add']">批量导入</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-dropdown @command="(command) => handleCommand1(command)" v-hasPermi="['iot:device:assignment']">
                        <el-button size="mini" type="primary" plain>
                            分配设备
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="handleSelectAllot" v-hasPermi="['iot:device:assignment']">选择分配</el-dropdown-item>
                            <el-dropdown-item command="handleImportAllot" v-hasPermi="['iot:device:assignment']">导入分配</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-button size="mini" type="primary" plain @click="recycleDevice" v-hasPermi="['iot:device:recovery']" style="margin-left: 10px">回收设备</el-button>
                </div>
                <div>
                    <el-radio-group class="fr ml10" plain size="mini" v-model="showType">
                        <el-radio-button label="card"><i class="el-icon-menu"></i></el-radio-button>
                        <el-radio-button label="list"><i class="el-icon-s-fold"></i></el-radio-button>
                    </el-radio-group>
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
                </div>
            </div>
            <el-table class="base-table" v-loading="loading" :data="deviceList" :border="false">
                <el-table-column label="图标" align="center" header-align="center" prop="deviceId" width="72">
                    <template v-slot="{ row }">
                        <el-image style="width: 100%; height: auto" lazy :preview-src-list="[baseUrl + item.imgUrl]" :src="baseUrl + row.imgUrl" fit="cover" v-if="row.imgUrl != null && row.imgUrl != ''" />
                        <el-image
                            style="width: 100%; height: auto"
                            :preview-src-list="[require('@/assets/images/gateway.svg')]"
                            :src="require('@/assets/images/gateway.svg')"
                            fit="cover"
                            v-else-if="row.deviceType == 2"
                        />
                        <el-image style="width: 100%; height: auto" :preview-src-list="[require('@/assets/images/video.svg')]" :src="require('@/assets/images/video.svg')" fit="cover" v-else-if="row.deviceType == 3" />
                        <el-image style="width: 100%; height: auto" :preview-src-list="[require('@/assets/images/product.svg')]" :src="require('@/assets/images/product.svg')" fit="cover" v-else />
                    </template>
                </el-table-column>
                <el-table-column label="编号" align="center" header-align="center" prop="deviceId" width="50" />
                <el-table-column label="设备名称" prop="deviceName" min-width="180" />
                <el-table-column label="设备编号" align="center" prop="serialNumber" min-width="130" />
                <el-table-column label="所属产品" align="center" prop="productName" min-width="160" />
                <el-table-column label="协议" align="center" prop="transport" min-width="80" />
                <el-table-column label="通讯协议" align="center" prop="protocolCode" min-width="140" />
                <el-table-column label="子设备数" align="center" prop="subDeviceCount" width="80">
                    <template slot-scope="scope">
                        {{ scope.row.subDeviceCount }}
                    </template>
                </el-table-column>
                <el-table-column label="设备影子" align="center" prop="isShadow" width="80">
                    <template slot-scope="scope">
                        <el-tag type="success" size="small" v-if="scope.row.isShadow == 1">启用</el-tag>
                        <el-tag type="info" size="small" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center" prop="status" width="80">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.iot_device_status" :value="scope.row.status" size="small" />
                    </template>
                </el-table-column>
                <el-table-column label="信号" align="center" prop="rssi" width="60">
                    <template slot-scope="scope">
                        <svg-icon v-if="scope.row.status == 3 && scope.row.rssi >= '-55'" icon-class="wifi_4" />
                        <svg-icon v-else-if="scope.row.status == 3 && scope.row.rssi >= '-70' && scope.row.rssi < '-55'" icon-class="wifi_3" />
                        <svg-icon v-else-if="scope.row.status == 3 && scope.row.rssi >= '-85' && scope.row.rssi < '-70'" icon-class="wifi_2" />
                        <svg-icon v-else-if="scope.row.status == 3 && scope.row.rssi >= '-100' && scope.row.rssi < '-85'" icon-class="wifi_1" />
                        <svg-icon v-else icon-class="wifi_0" />
                    </template>
                </el-table-column>
                <el-table-column label="定位方式" align="center" prop="locationWay" width="100">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.iot_location_way" :value="scope.row.locationWay" size="small" />
                    </template>
                </el-table-column>
                <el-table-column label="固件版本" align="center" prop="firmwareVersion" width="100">
                    <template slot-scope="scope">
                        <el-tag size="mini" type="info">Ver {{ scope.row.firmwareVersion }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="激活时间" align="center" prop="activeTime" width="100">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.activeTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" width="100">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="left" class-name="small-padding fixed-width" fixed="right" width="200">
                    <template slot-scope="scope">
                        <el-button type="danger" plain style="padding: 5px" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:device:remove']">删除</el-button>
                        <el-button type="primary" plain style="padding: 5px" icon="el-icon-view" @click="handleEditDevice(scope.row)" v-hasPermi="['iot:device:query']">查看</el-button>
                        <el-button type="primary" plain style="padding: 5px" @click="openSummaryDialog(scope.row)" v-if="form.deviceId != 0" v-hasPermi="['iot:device:query']">二维码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :pageSizes="[12, 24, 36, 60]" @pagination="getList" />
        </el-card>
        <el-card class="main-card" shadow="never" v-if="showType == 'card'" :style="showSearch ? '' : 'margin:0'">
            <div class="card-toolbar mb8">
                <div>
                    <el-dropdown class="mr10" @command="(command) => handleCommand(command)" v-hasPermi="['iot:device:add']">
                        <el-button size="mini" type="primary" plain icon="el-icon-plus">
                            新增
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="handleEditDevice" v-hasPermi="['iot:device:add']">手动添加</el-dropdown-item>
                            <el-dropdown-item command="handleBatchImport" v-hasPermi="['iot:device:add']">批量导入</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-dropdown @command="(command) => handleCommand1(command)" v-hasPermi="['iot:device:assignment']">
                        <el-button size="mini" type="primary" plain>
                            分配设备
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="handleSelectAllot" v-hasPermi="['iot:device:assignment']">选择分配</el-dropdown-item>
                            <el-dropdown-item command="handleImportAllot" v-hasPermi="['iot:device:assignment']">导入分配</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-button size="mini" type="primary" plain @click="recycleDevice" v-hasPermi="['iot:device:recovery']" style="margin-left: 10px">回收设备</el-button>
                </div>
                <div>
                    <el-radio-group class="fr ml10" plain size="mini" v-model="showType">
                        <el-radio-button label="card"><i class="el-icon-menu"></i></el-radio-button>
                        <el-radio-button label="list"><i class="el-icon-s-fold"></i></el-radio-button>
                    </el-radio-group>
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
                </div>
            </div>
            <el-row type="flex" :gutter="30" v-loading="loading" style="flex-wrap: wrap">
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="(item, index) in deviceList" :key="index" style="margin-bottom: 30px; text-align: center">
                    <el-card :body-style="{ padding: '20px' }" shadow="hover" class="card-item">
                        <el-row type="flex" :gutter="10" justify="space-between">
                            <el-col :span="19" style="text-align: left">
                                <el-link type="" :underline="false" @click="handleDeviceDetail(item)" style="font-weight: bold; font-size: 16px; line-height: 32px">
                                    <el-tooltip class="item" effect="dark" content="分享的设备" placement="top-start">
                                        <svg-icon class="mr5" icon-class="share" style="font-size: 20px; vertical-align: -6px" v-if="item.isOwner != 1" />
                                    </el-tooltip>
                                    <svg-icon icon-class="device" v-if="item.isOwner == 1" />
                                    <b class="card-item__title" @click="handleDeviceDetail(item)">{{ item.deviceName }}</b>

                                    <dict-tag :options="dict.type.iot_device_status" :value="item.status" size="small" style="display: inline-block" />
                                    <!-- <el-tag size="mini" type="info">Ver {{item.firmwareVersion}}</el-tag>-->
                                    <!-- <el-text v-if="item.protocolCode" type="info" size="mini" style="font-size: 14px; color: #ccc">{{ item.protocolCode }}</el-text> -->
                                </el-link>
                            </el-col>
                            <el-col :span="1.5" style="font-size: 20px; padding-top: 5px; cursor: pointer">
                                <svg-icon icon-class="qrcode" @click="openSummaryDialog(item)" v-hasPermi="['iot:device:query']" />
                            </el-col>
                            <el-col :span="5">
                                <div style="font-size: 28px; color: #ccc">
                                    <svg-icon v-if="item.status == 3 && item.rssi >= '-55'" icon-class="wifi_4" />
                                    <svg-icon v-else-if="item.status == 3 && item.rssi >= '-70' && item.rssi < '-55'" icon-class="wifi_3" />
                                    <svg-icon v-else-if="item.status == 3 && item.rssi >= '-85' && item.rssi < '-70'" icon-class="wifi_2" />
                                    <svg-icon v-else-if="item.status == 3 && item.rssi >= '-100' && item.rssi < '-85'" icon-class="wifi_1" />
                                    <svg-icon v-else icon-class="wifi_0" />
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10">
                            <el-col :span="17">
                                <div style="text-align: left; line-height: 40px; white-space: nowrap">
                                    <el-tag v-if="item.protocolCode" class="mr5" type="primary" size="small">
                                        {{ item.protocolCode }}
                                    </el-tag>
                                    <el-tag v-if="item.transport" class="mr5" type="primary" size="small">
                                        {{ item.transport }}
                                    </el-tag>
                                </div>
                                <el-descriptions :column="1" size="small" style="white-space: nowrap">
                                    <el-descriptions-item label="编号">
                                        <span class="font-primary">{{ item.serialNumber }}</span>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="产品">
                                        {{ item.productName }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="激活时间">
                                        {{ parseTime(item.activeTime, '{y}-{m}-{d}') }}
                                    </el-descriptions-item>
                                </el-descriptions>
                            </el-col>
                            <el-col :span="7">
                                <div style="margin-top: 10px">
                                    <el-image
                                        style="width: 80px; height: 80px; border-radius: 10px"
                                        lazy
                                        :preview-src-list="[baseUrl + item.imgUrl]"
                                        :src="baseUrl + item.imgUrl"
                                        fit="cover"
                                        v-if="item.imgUrl != null && item.imgUrl != ''"
                                    ></el-image>
                                    <el-image
                                        style="width: 80px; height: 80px; border-radius: 10px"
                                        :preview-src-list="[require('@/assets/images/gateway.svg')]"
                                        :src="require('@/assets/images/gateway.svg')"
                                        fit="cover"
                                        v-else-if="item.deviceType == 2"
                                    ></el-image>
                                    <el-image
                                        style="width: 80px; height: 80px; border-radius: 10px"
                                        :preview-src-list="[require('@/assets/images/video.svg')]"
                                        :src="require('@/assets/images/video.svg')"
                                        fit="cover"
                                        v-else-if="item.deviceType == 3"
                                    ></el-image>
                                    <el-image
                                        style="width: 80px; height: 80px; border-radius: 10px"
                                        :preview-src-list="[require('@/assets/images/product.svg')]"
                                        :src="require('@/assets/images/product.svg')"
                                        fit="cover"
                                        v-else
                                    ></el-image>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="card-item__footer">
                            <el-button class="delete-btn" size="mini" @click="handleDelete(item)" v-hasPermi="['iot:device:remove']">删除</el-button>
                            <el-button class="detail-btn" size="mini" @click="handleEditDevice(item, 'basic')" v-hasPermi="['iot:device:query']">查看详情</el-button>
                            <el-button size="mini" @click="handleRunDevice(item)" v-hasPermi="['iot:device:query']">运行状态</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-empty description="暂无数据，请添加设备" v-if="total == 0"></el-empty>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :pageSizes="[12, 24, 36, 60]" @pagination="getList" />
        </el-card>
        <!-- 二维码 -->
        <el-dialog :visible.sync="openSummary" width="300px" append-to-body>
            <div style="border: 1px solid #ccc; width: 220px; text-align: center; margin: 0 auto; margin-top: -15px">
                <vue-qr :text="qrText" :size="200"></vue-qr>
                <div style="padding-bottom: 10px">设备二维码</div>
            </div>
        </el-dialog>
        <!-- 批量导入设备 -->
        <batchImport ref="batchImport" @save="saveDialog"></batchImport>
        <!-- 导入分配 -->
        <allotImport ref="allotImport" @save="saveAllotDialog"></allotImport>
        <!-- 导入记录 -->
        <importRecord ref="importRecord"></importRecord>
        <!-- 设备回收记录 -->
        <recycleRecord ref="recycleRecord"></recycleRecord>
        <!-- 设备分配记录 -->
        <allotRecord ref="allotRecord"></allotRecord>
    </div>
</template>

<script>
import vueQr from 'vue-qr';
import { listDeviceShort, delDevice } from '@/api/iot/device';
import { listGroup } from '@/api/iot/group';
import { delSipDeviceBySipId } from '@/api/iot/sipdevice';
import auth from '@/plugins/auth';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import batchImport from './batch-import-dialog';
import allotImport from './allot-import-dialog';
import importRecord from './import-record';
import recycleRecord from './recycle-record';
import allotRecord from './allot-record';

export default {
    name: 'Device',
    dicts: ['iot_device_status', 'iot_is_enable', 'iot_location_way', 'iot_transport_type'],
    components: {
        vueQr,
        Treeselect,
        batchImport,
        allotImport,
        importRecord,
        recycleRecord,
        allotRecord,
    },
    data() {
        return {
            // 二维码内容
            qrText: 'fastbee',
            // 打开设备配置对话框
            openSummary: false,
            // 显示搜索条件
            showSearch: true,
            // 展示方式
            showType: 'card',
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 设备列表数据
            deviceList: [],
            // 我的分组列表数据
            myGroupList: [],
            // 根路径
            baseUrl: process.env.VUE_APP_BASE_API,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 12,
                showChild: true,
                deviceName: null,
                productId: null,
                groupId: null,
                productName: null,
                userId: null,
                userName: null,
                tenantId: null,
                tenantName: null,
                serialNumber: null,
                status: null,
                networkAddress: null,
                activeTime: null,
            },
            // 表单参数
            form: {
                productId: 0,
                status: 1,
                locationWay: 1,
                firmwareVersion: 1.0,
                serialNumber: '',
                deviceType: 1,
                isSimulate: 0,
            },
            productList: [],
            // 批量导入参数
            isSubDev: false,
        };
    },
    created() {
        // 产品筛选
        let productId = this.$route.query.productId;
        if (productId != null) {
            this.queryParams.productId = Number(productId);
            this.queryParams.groupId = null;
            this.queryParams.serialNumber = null;
        }
        // 分组筛选
        let groupId = this.$route.query.groupId;
        if (groupId != null) {
            this.queryParams.groupId = Number(groupId);
            this.queryParams.productId = null;
            this.queryParams.serialNumber = null;
        }
        // 设备编号筛选
        let sn = this.$route.query.sn;
        if (sn != null) {
            this.queryParams.serialNumber = sn;
            this.queryParams.productId = null;
            this.queryParams.groupId = null;
        }
        this.connectMqtt();
    },
    activated() {
        const time = this.$route.query.t;
        if (time != null && time != this.uniqueId) {
            this.uniqueId = time;
            // 页码筛选
            let pageNum = this.$route.query.pageNum;
            if (pageNum != null) {
                this.queryParams.pageNum = Number(pageNum);
            }
            // 产品筛选
            let productId = this.$route.query.productId;
            if (productId != null) {
                this.queryParams.productId = Number(productId);
                this.queryParams.groupId = null;
                this.queryParams.serialNumber = null;
            }
            // 分组筛选
            let groupId = this.$route.query.groupId;
            if (groupId != null) {
                this.queryParams.groupId = Number(groupId);
                this.queryParams.productId = null;
                this.queryParams.serialNumber = null;
            }
            // 设备编号筛选
            let sn = this.$route.query.sn;
            if (sn != null) {
                this.queryParams.serialNumber = sn;
                this.queryParams.productId = null;
                this.queryParams.groupId = null;
            }
            this.getList();
        }
    },
    methods: {
        /* 连接Mqtt消息服务器 */
        async connectMqtt() {
            if (this.$mqttTool.client == null) {
                await this.$mqttTool.connect();
            }
            this.mqttCallback();
            this.getList();
        },
        /* Mqtt回调处理  */
        mqttCallback() {
            this.$mqttTool.client.on('message', (topic, message, buffer) => {
                let topics = topic.split('/');
                let productId = topics[1];
                let deviceNum = topics[2];
                message = JSON.parse(message.toString());
                if (!message) {
                    return;
                }
                if (topics[3] == 'status') {
                    console.log('接收到【设备状态】主题：', topic);
                    console.log('接收到【设备状态】内容：', message);
                    // 更新列表中设备的状态
                    for (let i = 0; i < this.deviceList.length; i++) {
                        if (this.deviceList[i].serialNumber == deviceNum) {
                            this.deviceList[i].status = message.status;
                            this.deviceList[i].isShadow = message.isShadow;
                            this.deviceList[i].rssi = message.rssi;
                            return;
                        }
                    }
                }
            });
        },
        // 新增设备更多操作触发
        handleCommand(command) {
            switch (command) {
                case 'handleEditDevice':
                    this.handleEditDevice(0);
                    break;
                case 'handleBatchImport':
                    this.handleBatchImport();
                    break;
                default:
                    break;
            }
        },
        //批量导入设备
        handleBatchImport() {
            this.$refs.batchImport.upload.importDeviceDialog = true;
            this.$refs.batchImport.importForm.productId = null;
        },
        //导入分配设备
        handleImportAllot() {
            this.$refs.allotImport.upload.importAllotDialog = true;
            this.$refs.allotImport.allotForm.productId = null;
            this.$refs.allotImport.allotForm.deptId = null;
        },
        // dialog 保存响应
        saveDialog() {
            this.getList();
        },
        // dialog 保存响应
        saveAllotDialog() {
            this.getList();
        },
        // 分配设备更多操作触发
        handleCommand1(command) {
            switch (command) {
                case 'handleSelectAllot':
                    this.handleSelectAllot();
                    break;
                case 'handleImportAllot':
                    this.handleImportAllot();
                    break;
                default:
                    break;
            }
        },
        //跳转选择分配设备页面
        handleSelectAllot() {
            this.$router.push({
                path: '/iotdev/iot/device-select-allot',
            });
        },
        //跳转回收设备页面
        recycleDevice() {
            this.$router.push({
                path: '/iotdev/iot/device-recycle',
            });
        },
        //更多操作
        handleCommandMore(command) {
            switch (command) {
                case 'importRecord':
                    this.handleImportRecord();
                    break;
                case 'exportDevice':
                    this.handleexportDevice();
                    break;
                case 'recycleRecord':
                    this.handleRecycleRecord();
                    break;
                case 'allotRecord':
                    this.handleAllotRecord();
                    break;
                default:
                    break;
            }
        },
        //导入记录
        handleImportRecord() {
            this.$refs.importRecord.open = true;
        },
        //设备回收记录
        handleRecycleRecord() {
            this.$refs.recycleRecord.open = true;
        },
        //设备分配记录
        handleAllotRecord() {
            this.$refs.allotRecord.open = true;
        },

        openSummaryDialog(row) {
            let json = {
                type: 1, // 1=扫码关联设备
                deviceNumber: row.serialNumber,
                productId: row.productId,
                productName: row.productName,
            };
            this.qrText = JSON.stringify(json);
            this.openSummary = true;
        },
        /* 订阅消息 */
        mqttSubscribe(list) {
            // 订阅当前页面设备状态和实时监测
            let topics = [];
            for (let i = 0; i < list.length; i++) {
                let topicStatus = '/' + '+' + '/' + list[i].serialNumber + '/status/post';
                topics.push(topicStatus);
            }
            this.$mqttTool.subscribe(topics);
        },
        /** 查询设备分组列表 */
        getGroupList() {
            this.loading = true;
            let queryParams = {
                pageSize: 30,
                pageNum: 1,
                userId: this.$store.state.user.userId,
            };
            listGroup(queryParams).then((response) => {
                this.myGroupList = response.rows;
            });
        },
        /** 查询所有简短设备列表 */
        getList() {
            this.loading = true;
            this.queryParams.params = {};
            this.getGroupList();
            // this.deviceList = [
            //     {
            //         deviceName: '测试-摄像头',
            //         serialNumber: '1001',
            //         productName: 'test',
            //         transport: 'TCP',
            //         protocolCode: 'TCP',
            //         isShadow: 1,
            //         subDeviceCount: '3',
            //         status: 3,
            //         rssi: '-60',
            //         deviceId: '001',
            //         deviceType: 3,
            //         locationWay: 'test',
            //         firmwareVersion: '2.0.1',
            //         activeTime: '2024-07-30',
            //         createTime: '2024-07-30',
            //     }
            // ];
            // this.loading = false;
            //
            // return;
            listDeviceShort(this.queryParams)
                .then((response) => {
                    this.deviceList = response.rows;
                    this.total = response.total;
                    // 订阅消息
                    if (this.deviceList && this.deviceList.length > 0) {
                        this.mqttSubscribe(this.deviceList);
                    }
                })
                .catch((e) => {
                    console.error(e);
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.productId = null;
            this.queryParams.groupId = null;
            this.queryParams.serialNumber = null;
            this.resetForm('queryForm');
            this.handleQuery();
        },
        // 点击名称查看
        handleDeviceDetail(item) {
            if (auth.hasPermi('iot:device:query')) {
                this.handleEditDevice(item);
            }
        },
        /** 修改按钮操作 */
        handleEditDevice(row, activeName) {
            let deviceId = 0;
            let isSubDev = 0;
            if (row != 0) {
                deviceId = row.deviceId || this.ids;
                isSubDev = row.subDeviceCount > 0 ? 1 : 0;
            }
            this.$router.push({
                path: '/iotdev/iot/device-edit',
                query: {
                    deviceId: deviceId,
                    isSubDev: isSubDev,
                    pageNum: this.queryParams.pageNum,
                    activeName: activeName,
                },
            });
        },
        /** 运行状态按钮操作 */
        handleRunDevice(row) {
            let deviceId = 0;
            let isSubDev = 0;
            if (row != 0) {
                deviceId = row.deviceId || this.ids;
                isSubDev = row.subDeviceCount > 0 ? 1 : 0;
            }
            if (row.deviceType === 3) {
                this.$router.push({
                    path: '/iotdev/iot/device-edit',
                    query: {
                        deviceId: deviceId,
                        isSubDev: isSubDev,
                        pageNum: this.queryParams.pageNum,
                        activeName: 'sipChannel',
                    },
                });
            } else {
                this.$router.push({
                    path: '/iotdev/iot/device-edit',
                    query: {
                        deviceId: deviceId,
                        isSubDev: isSubDev,
                        pageNum: this.queryParams.pageNum,
                        activeName: 'runningStatus',
                    },
                });
            }
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const deviceIds = row.deviceId || this.ids;
            this.$modal
                .confirm('是否确认删除设备编号为"' + deviceIds + '"的数据项？')
                .then(function () {
                    if (row.deviceType === 3) {
                        delSipDeviceBySipId(row.serialNumber);
                    }
                    return delDevice(deviceIds);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess('删除成功');
                })
                .catch(() => {});
        },
        /** 未启用设备影子*/
        shadowUnEnable(device, thingsModel) {
            // 1-未激活，2-禁用，3-在线，4-离线
            if (device.status != 3 && device.isShadow == 0) {
                return true;
            }
            if (thingsModel.isReadonly) {
                return true;
            }
            return false;
        },
        //   获取表格图片
        getImg(row) {
            switch (row.deviceType) {
                case 2:
                    return '@/assets/images/gateway.svg';
                case 3:
                    return '@/assets/images/video.svg';
            }
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-upload-dragger {
    width: 510px;
}

.el-dropdown-menu__item {
    font-size: 12px;
    /* 设置字体大小 */
}

.font-primary {
    color: var(--primary-color);
}

.device {
    --font-grey: #606266;
    --success-color: #67c23b;
    padding: 20px;
    .search-form {
        .el-form-item {
            ::v-deep .el-form-item__label {
                font-weight: normal;
                color: var(--font-grey);
            }
        }
    }

    .main-card.el-card {
        margin-top: 20px;
        padding-bottom: 50px;
        border: 0;

        .card-toolbar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;

            .el-radio-button {
                ::v-deep .el-radio-button__inner {
                    background-color: #f0f2f5;
                    border-color: #fff;
                }

                &.is-active {
                    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
                        background-color: #0147eb;
                        border-color: #0147eb;
                        /* border-color: #fff; */
                        /* color: var(--font-grey); */
                        // box-shadow: -1px 0 0 0 #f0f2f5;
                    }
                }
            }
        }

        .is-publish {
            font-size: 12px;
            white-space: nowrap;
            color: var(--success-color);

            &:before {
                margin-right: 4px;
                display: inline-block;
                width: 4px;
                height: 4px;
                border-radius: 2px;
                vertical-align: 2px;
                background: var(--success-color);
                content: '';
            }
        }

        .el-table {
            ::v-deep .el-table__header th {
                color: #9a9da3;
                border-color: #f6f8fa;
                background-color: #f5f7fa;
            }

            ::v-deep .el-table__body .el-table__cell {
                color: #606266;
                padding: 8px 0;
                border-color: #f6f8fa;

                .el-button {
                    border-color: transparent;
                    background: transparent;

                    &:hover {
                        &.el-button--danger {
                            color: #ff9999;
                        }

                        &.el-button--primary {
                            color: #91a8f8;
                        }
                    }

                    &.el-button {
                        margin-left: 2px;
                    }
                }
            }
        }

        .pagination-container {
            ::v-deep .el-pagination {
                .el-pager li:not(.disabled).active {
                    background-color: var(--primary-color);
                }
            }
        }
    }

    .card-item {
        height: 100%;
        border-radius: 4px;
        background-image: linear-gradient(#e9f1fc, #fefefe);

        ::v-deep .el-card__body {
            display: flex;
            height: 100%;
            flex-direction: column;
            justify-content: space-between;
        }

        .card-item__title {
            vertical-align: -2px;
            margin-right: 0.5em;
        }

        .el-descriptions {
            ::v-deep .el-descriptions__body {
                background: transparent;
            }
        }

        .card-item__footer {
            margin-top: 1em;
            text-align: right;

            .el-button {
                background: #f5f7fa;
                border-color: #f5f7fa;

                &.detail-btn {
                    color: var(--primary-color);
                }
                &.delete-btn {
                    color: #ff6363;
                }

                &:hover {
                    border-color: var(--primary-color);
                    color: var(--primary-color);
                }
            }
        }
    }
}
</style>
